<template>
	<view class="circle-page">
		<!-- 自定义头部 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container">
					<view class="header-left">
						<view class="logo-container">
							<image :src="`${config.commonUrl}/logo-orange.png`" mode="aspectFit" class="logo-image" />
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">邻里圈</text>
					</view>
					<view class="header-right">
						<view class="search-btn" @click="openSearch">
							<text class="cuIcon-search"></text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 固定导航区域 -->
		<view class="fixed-nav">
			<scroll-view scroll-x class="nav-scroll" :scroll-left="scrollLeft" scroll-with-animation>
				<view class="nav-container">
					<view 
						class="nav-item" 
						:class="{'active': index == TabCur}"
						v-for="(item, index) in tabList" 
						:key="index" 
						@tap="tabSelect" 
						:data-id="index"
					>
						<text class="nav-text">{{item.title}}</text>
						<view class="nav-indicator" v-if="index == TabCur"></view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 公告栏 -->
		<view class="notice-section" v-if="noticeBarText">
			<uni-notice-bar 
				show-icon 
				scrollable 
				background-color="#fff7e6" 
				color="#d46b08"
				:text="noticeBarText" 
			/>
		</view>

		<!-- 内容区域 -->
		<view class="content-area">
			<view class="content-wrapper">
				<circleCardList 
					@deleteCircleItem="deleteCircleItem" 
					@likeCircle="likeCircle"
					@commentCircle="commentCircle"
					:userInfo="userInfo" 
					:circleList='circleList'
					:tabType='tabType' 
					:loading="loading"
				/>
			</view>
		</view>

		<!-- 悬浮发布按钮 -->
		<view class="floating-action">
			<view class="fab-button" @click="editCircle">
				<text class="fab-icon">+</text>
			</view>
		</view>

		<!-- 底部导航 -->
		<TabBar :PageCur="'circle'" />
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import TabBar from '@/components/tabBar.vue';
	import circleCardList from '@/components/circle-card-list.vue';
	import config from '@/config/config';
	import storage from "@/utils/storage.js";
	import {
		getCircle,
		deleteCircle,
		likeCircleInfo as likeCircleApi
	} from '@/api/circle.js'
	import {
		getNotice
	} from "@/api/home.js";
	
	export default {
		components: {
			TabBar,
			headerSlot,
			circleCardList
		},
		data() {
			return {
				config,
				TabCur: 0,
				type: 1,
				tabType: {
					id: 0,
					title: '全部',
				},
				scrollLeft: 0,
				circleList: [],
				noticeBarText: '',
				loading: false,
				tabList: [{
						id: 0,
						title: '全部',
						icon: 'cuIcon-home'
					}, {
						id: 1,
						title: '邻里日常',
						icon: 'cuIcon-group'
					}, {
						id: 3,
						title: '邻里闲置',
						icon: 'cuIcon-shop'
					},
					{
						id: 2,
						title: '失物招领',
						icon: 'cuIcon-search'
					}
				],
				page: {
					page: 1,
					limit: 10,
				},
				total: 0,
				userInfo: {}
			};
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
			this.initNotice()
		},
		onShow() {
			this.circleList = []
			this.page.page = 1
			this.initCircle()
		},
		onPullDownRefresh() {
			this.circleList = []
			this.page = {
				page: 1,
				limit: 10
			}
			this.initCircle()
		},
		onReachBottom() {
			if (this.circleList.length < this.total && this.circleList.length > 0 && !this.loading) {
				this.page.page++
				this.initCircle()
			}
		},
		methods: {
			initNotice() {
				getNotice().then(res => {
					const validNotices = res.data.data.filter(item =>
						item.type === 'notice' && item.title && item.content
					)

					if (validNotices.length > 0) {
						this.noticeBarText = validNotices
							.map((item, idx) => `${idx + 1}. ${item.title}：${item.content}`)
							.join('   ')
					} else {
						this.noticeBarText = "惠邻生活上线啦！欢迎各位业主～认证业主身份，收获邻居信任，上门订单任您挑！"
					}
				}).catch(() => {
					this.noticeBarText = "惠邻生活上线啦！欢迎各位业主～认证业主身份，收获邻居信任，上门订单任您挑！"
				})
			},
			initCircle() {
				this.loading = true
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				
				getCircle(this.page).then(res => {
					if (this.circleList.length > 0) {
						this.circleList = [...this.circleList, ...res.data.data.list]
					} else {
						this.circleList = res.data.data.list
					}
					this.total = res.data.data.pagination.total
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
				}).finally(() => {
					this.loading = false
				})
			},
			deleteCircleItem(circleItem) {
				deleteCircle(circleItem._id).then(res => {
					uni.showToast({
						title: "删除成功",
						icon: "success",
					});
					this.circleList = this.circleList.filter(item => {
						return item._id != circleItem._id
					})
				})
			},
			likeCircle(circleItem) {
				likeCircleApi(circleItem._id).then(res => {
					// 更新本地数据
					const index = this.circleList.findIndex(item => item._id === circleItem._id)
					if (index !== -1) {
						this.circleList[index].isLiked = !this.circleList[index].isLiked
						this.circleList[index].likeCount = this.circleList[index].isLiked 
							? (this.circleList[index].likeCount || 0) + 1 
							: (this.circleList[index].likeCount || 1) - 1
					}
				})
			},
			commentCircle(circleItem) {
				this.$router.smartNavigate(`/pages/circlePages/circleInfo?id=${circleItem._id}&focus=comment`, 'navigateTo')
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.type = this.tabList[this.TabCur].id
				this.tabType = this.tabList[this.TabCur]
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				
				if (this.tabType.title !== "全部") {
					this.page.type = this.tabType.title
				} else {
					delete this.page.type
				}
				
				this.circleList = []
				this.page.page = 1
				this.initCircle()
			},
			editCircle() {
				this.$store.commit('setEditCircle', {})
				this.$router.smartNavigate('/pages/circlePages/editCircle', 'navigateTo')
			},
			openSearch() {
				uni.showToast({
					title: "搜索功能开发中",
					icon: "none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle-page {
		min-height: 100vh;
		background: #f8f9fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;
		
		.header-left {
			.logo-container {
				width: 176rpx;
				height: 48rpx;
				
				.logo-image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.header-center {
			.page-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #2C2622;
			}
		}
		
		.header-right {
			.search-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f0f0f0;
				border-radius: 50%;
				
				.cuIcon-search {
					font-size: 32rpx;
					color: #666;
				}
			}
		}
	}

	.fixed-nav {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		
		.nav-scroll {
			white-space: nowrap;
		}
		
		.nav-container {
			display: flex;
			padding: 0 32rpx;
			
			.nav-item {
				position: relative;
				padding: 24rpx 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				transition: all 0.3s ease;
				
				.nav-text {
					font-size: 32rpx;
					font-weight: 400;
					color: #555C67;
					transition: all 0.3s ease;
				}
				
				.nav-indicator {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 36rpx;
					height: 6rpx;
					background: #FE6100;
					border-radius: 3rpx;
					transition: all 0.3s ease;
				}
				
				&.active {
					.nav-text {
						font-weight: 600;
						color: #2C2622;
					}
				}
			}
		}
	}

	.notice-section {
		margin-top: 100rpx;
		padding: 4rpx 32rpx;
	}

	.content-area {
		
		.content-wrapper {
			padding-bottom: 120rpx;
		}
	}

	.floating-action {
		position: fixed;
		right: 32rpx;
		bottom: 120rpx;
		z-index: 20;
		
		.fab-button {
			width: 100rpx;
			height: 100rpx;
			background: linear-gradient(135deg, #FE6100, #FF8C42);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 24rpx rgba(254, 97, 0, 0.3);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.4);
			}
			
			.fab-icon {
				font-size: 48rpx;
				color: #fff;
				font-weight: 300;
			}
		}
	}
</style>